<template>
  <section class="content">
    <section class="margin_info">
      <div class="title">
        <p class="price">
          <i>&yen;</i>
          <span>{{getInt(auction_info.deposit)}}</span>
          <em>{{getDot(auction_info.deposit)}}</em>
        </p>
        <p>报名保证金</p>
      </div>
      <div class="info_content">
        <div class="contet-r">
          <p>商家可以设置一轮或多轮竞拍，每一轮拍卖胜出，逾期不支付货款的视为违约，将扣除保证金，并无法继续参与该拍卖活动。拍卖活动所有轮次都结束后，不存在违约情况的竞拍者，将退还保证金。</p>
          <p class="treaty">
            <i class="treaty-checkBox">
              <van-radio-group v-model="radio" icon-size="13px"  checked-color="#F21228">
                <van-radio name="1" shape="square"></van-radio>
              </van-radio-group>
            </i>
            <span>报名参加竞拍均视为同意竞拍协议</span>
            <em @click="Jump('auctionNotice')">查看协议</em>
          </p>
        </div>
      </div>
    </section>
    <section class="pay-box">
      <payment ref="payments"
        :isHdfkPay='false'
        :isXxPay='false'
        :isPM="false"
        :isYuePay="true"
        @globalAlipay="globalAlipay"
        v-model="paymentWay"></payment>
    </section>
    <div class="btn">
      <span class="red-gra-btn" @click="ClickOrder">提交订单</span>
    </div>
  </section> 
</template>

<script>
import { marginData, addDeposit } from '@/api/activity/activityApi'
import Payment from '@/components/Payment'
import { openPage } from "@/utils/utils";
import Vue from 'vue'
import { RadioGroup, Radio, Checkbox } from 'vant'

Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Checkbox)

export default Vue.extend({
  components: {
    Payment
  },
  data() {
    return {
      radio: '1',
      paymentWay: 'wxpay',
      auction_info: {}
    }
  },
  created() {
    this.ajaxBidingInfo()
  },
  methods: {
    Jump(url,data){
      this.$JumpPath(this,url,data)
    },
  // 缴纳保证金
    ajaxBidingInfo() {
      const query = this.$route.query
      const params = {
        item_auction_id: query.id
      }
      this.$loadingWrap.show()
      marginData(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.auction_info = res.data.auction_info
          this.$refs['payments'].onSetBalance(res.data.balance, this.auction_info)
        } else {
          this.$Error(res.msg)
        }
      })
    },
    ClickOrder() {
      const query = this.$route.query
      const yue = this.$refs['payments'].getYueDataWrap()
      const submitData = {
        item_auction_id: query.id
      }
      if (this.paymentWay == 'wxpay') {
        // if (isWeixinCient()) { // 微信环境
        submitData.pay_type = 2
        yue.checkPayment && (submitData.money_type = 2)
      } else if (this.paymentWay == 'alipay') {
        submitData.pay_type = 1
        yue.checkPayment && (submitData.money_type = 2)
      } else if (this.paymentWay == 'ylpay') {
        submitData.pay_type = 8
        yue.checkPayment && (submitData.money_type = 2)
      } else if (yue.checkPayment) {
        submitData.pay_type = 0
        submitData.money_type = ''
      }
      // 支付保证金
      addDeposit(submitData).then(res => {
        if (res.status == 1) {
          const url=res.data.redirect_url
          // 小程序微信支付
          if (submitData.pay_type == 2 && res.data.jsApiParameters) {
            if (res.data.jsApiParameters) {
              const payData = JSON.parse(res.data.jsApiParameters)
              wx.requestPayment({
                timeStamp: payData.timeStamp,
                nonceStr: payData.nonceStr, //
                package: payData.package, //
                signType: payData.signType, //微信签名方式
                paySign: payData.paySign, //微信签名
                success: (res) => {
                  // console.log(res)
                  openPage(url)
                },
                fail: (failmsg) => {
                  // console.log(failmsg)
                }
              })
            }
          }else{
            openPage(url)
          }
        }else{
          this.$Error(res.msg)
        }
      })
    },
    globalAlipay(val) {
      this.global_alipay_currency = val
    },
    getInt(price) {
      if (price) {
        const idx = price.indexOf('.')
        return idx !== -1 ? price.substr(0, idx) : price
      } else {
        return '0'
      }
    },
    getDot(price) {
      if (price) {
        const idx = price.indexOf('.')
        return idx !== -1 ? price.substr(idx) : '.00'
      } else {
        return '.00'
      }
    }
  }
})
</script>

<style lang="scss">
.content{
  .margin_info{
    .title{
      position: relative;
      height: 266px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      background: url(https://img.wifenxiao.com/h5-wfx/images/activity/margin_bg.png) center/cover no-repeat;
      p{
        font-size: 26px;
        color: #FFD9DD;
        &.price{
          color: #FFFFFF;
          font-size: 0;
          letter-spacing: 2px;
          margin-bottom: 28px;
          i,em{
            font-size:36px;
          }
          span,i,em{
            display:inline-block;
          }
          span{
           font-size: 50px;
          }
        }
      }
      &::after{
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px;
        border-color: transparent transparent #FFF7E5 transparent;
        bottom: -5px;
      }
    }
    .info_content{
      background: #FFF7E5;
      padding: 30px;
      p{
        font-size:26px;
        color:rgba(77,77,77,1);
        line-height:40px;
        &.treaty{
          padding: 15px 0;
          text-align: center;
          em{
            display:inline-block;
            color: #F21228;
          }
          span{
            margin:0 10px;
          }
          i{
            display: inline-block;
            vertical-align: -2px;
          }
        }
      }
    }
  }
  .pay-box{
    background: #fff;
    margin-top:20px ;
    padding: 0 30px;
  }
  .btn{
    padding: 50px 30px;
    span{
      display: block;
      line-height: 76px;
      text-align: center;
      border-radius: 76px;
      text-align: center;
      font-size: 32px;
      color: #fff;
    }
  } 
}
.miniprogram-root{
  .content{
    .treaty{
      .van-radio__icon .van-icon{
        width:26px;
        height:26px;
        font-size:26px;
      }
    }
  }
}
    

</style>